import { Palette, Palettes } from "./palette.slint";

export global Theme {
    out property <length> font-size: 14px;
    out property <color> font_color: is-dark ? Colors.white : Colors.black;
    in-out property <bool> is_dark: false;

    out property <Palette> palette: is-dark ? Palettes.dark : Palettes.default;

    out property <color> background: is-dark ? palette.gray-11 : palette.gray-0;

    out property <color> title-color: is-dark ? font-color.with-alpha(0.85) : font-color.with-alpha(0.85);
    out property <color> primary-text-color: is-dark ? font-color.with-alpha(0.85) : font-color.with-alpha(0.85);
    out property <color> secondary-text-color: is-dark ? font-color.with-alpha(0.45) : font-color.with-alpha(0.45);
    out property <color> disable-color: is-dark ? font-color.with-alpha(0.3) : font-color.with-alpha(0.25);
    out property <color> border-color: is-dark ? font-color.with-alpha(0.2) : font-color.with-alpha(0.15);
    out property <color> divider-color: is-dark ? font-color.with-alpha(0.12) : font-color.with-alpha(0.06);
    out property <color> background-color: is-dark ? font-color.with-alpha(0.08) : font-color.with-alpha(0.04);
    out property <color> table-header-color: is-dark ? font-color.with-alpha(0.04) : font-color.with-alpha(0.02);

    out property <color> brand-color: palette.blue-5;
    out property <color> selected-background-color: palette.blue-0;
    out property <color> hover-color: palette.blue-4;
    out property <color> normal-color: brand-color;
    out property <color> click-color: is-dark ? palette.blue-6 : #3993dc;
}